<template>
	<view style="padding: 40rpx;">
		<view>
			<u-modal :show="show2" :title="title" @confirm="confirm2">
				<view class="slot-content">
					<rich-text :nodes="content"></rich-text>
				</view>
			</u-modal>
		</view>
		<view class="custmoer" @click="chooseCustomer()">
			<view class="">
				客户:
			</view>
			<view class="">
				{{custmoterName}}
			</view>
			<image src="../../static/ic_arrow_smallgrey.png" style="width: 30rpx;height:30rpx; margin: 6rpx;" mode=""></image>

		</view>

		<view class="info">
			款式:{{name}}-{{id}}
		</view>

		<view class="brand">




			<view class="item">
				<view>选择颜色</view>
				<u-checkbox-group placement="column" v-model="checkboxValue1" @change="checkboxChange">
					<u-checkbox labelSize="20" :customStyle="{margin: '15rpx'}" v-for="(item, index) in color" :key="index" :label="item.colorName"
					 :name="item.colorName">
					</u-checkbox>
				</u-checkbox-group>
			</view>


			<view class="item">
				<view>选择尺码</view>
				<view>
					<u-checkbox-group placement="column" v-model="checkboxValue2" @change="checkboxChange2">
						<u-checkbox labelSize="25" :customStyle="{margin: '15rpx'}" v-for="(item, index) in size" :key="index" :label="item.sizeName"
						 :name="item.sizeName">
						</u-checkbox>
					</u-checkbox-group>
				</view>
			</view>

			<view class="bt">
				<u-button type="primary" @click="dealSize()">生成表格</u-button>
			</view>

			<view class="organizationDetails">
				<!-- 内容区 -->
				<view class="table-content">
					<table ref="table" class="table">
						<!-- 表头 -->
						<thead>
							<tr class="top">
								<th v-for="(item_th, index_th) in pop" :key="index_th" :style="{background: item_th.backgroundColor }">
									<!-- 	<span class="title">{{ item_th.title }}</span> -->
								</th>
							</tr>
						</thead>

						<!--展示列表数据 -->

						<tbody v-for="item1 in colorList2">
							<tr v-for="(item2,index) in item1.sizeDtos">

								<td>{{ item1.colorName }} {{ item2.sizeName }}</td>
								<!-- <td ></td> -->
								<td>
									<view style="margin: 10px;">
										<u-number-box :min="0" v-model="item2.mount"></u-number-box>
									</view>
								</td>
							</tr>


						</tbody>
					</table>
				</view>

			</view>

			<view class="" style="padding: 30rpx;">

				<u--form :model="form" ref="form">

					<u-form-item label="应收款">
						<u-input class="input" v-model="form.receivableAmount" />
					</u-form-item>

					<u-form-item label="已收款">

						<u-input class="input" v-model="form.paidAmount" />
					</u-form-item>

					<u-form-item label="交货时间">

						<u-calendar :show="show" @confirm="confirm"></u-calendar>
						<u-button @click="show = true">{{btname}}</u-button>

					</u-form-item>
				</u--form>

			</view>

			<view class="bt">
				<u-button type="primary" @click="save()">保存</u-button>
			</view>


		</view>

		<u-toast ref="uToast"></u-toast>

	</view>
</template>

<script>
	export default {

		data() {
			return {
				show2: false,
				title: '标题',
				content: '',
				btname: "选择日期",
				show: false,
				form: {

					receivableAmount: 0,
					paidAmount: 0,
					time: ""
				},
				id: "", //款式id
				name: "", //款式名称
				custmoterName: "去选择",
				custmoterId: "0",
				checkboxValue1: [], //筛选的颜色
				checkboxValue2: [], //赛选的尺码
				// 基本案列数据
				size: [],

				pop: [{
						title: '颜色',

					},
					{
						title: '尺码',
					},
					{
						title: '数量',
					}

				],

				color: [

				],
				colorList2: [


				],
			}
		},
		methods: {
			save() {
				var that = this
				this.api.post("/customer/newOrder", {
					clothesId: that.id,
					salesTime: that.form.time,
					companyId: that.$store.state.myCompanyId,
					customerId: that.$store.state.custmoerId,
					receivableAmount: that.form.receivableAmount,
					paidAmount: that.form.paidAmount,
					colorsDtos: that.colorList2
				}).then(res => {
					if (res.code == 200) {
						that.$refs.uToast.show({
							type: 'success',
							title: '提示',
							message: "操作成功",
						})
						uni.navigateBack()
					} else {
						that.show2 = true
						that.title = '创建失败' + res.code,
							that.content = res.msg
						// setTimeout(function() {
						// uni.showModal({
						// 	confirmText:'查看库存',
						//     title: '创建失败'+res.code,
						//     content: res.mes,
						//     success: function (res) {
						//         if (res.confirm) {
						//             console.log('用户点击确定');
						//         } else if (res.cancel) {
						//             console.log('用户点击取消');
						//         }
						//     }
						// });
						// }

						// ,500)


					}

					console.log(res);
				})
			},
			
			confirm2() {
					
				this.show2 = false;
					
					},
			chooseCustomer() {
				uni.navigateTo({
					url: "/pages/choosecustmoer/choosecustmoer"
				})
			},
			confirm(e) {
				this.btname = e[0]
				this.form.time = e[0]
				console.log(e);
				this.show = false
			},
			dealSize() {
				if (this.$store.state.custmoerId == "") {
					this.$refs.uToast.show({
						type: 'default',
						title: '错误',
						message: "请先选择客户！",
					})
					return
				}

				var newList = []
				for (var i = 0; i < this.checkboxValue1.length; i++) {
					//颜色数据
					var sizeDtos = []
					for (var j = 0; j < this.checkboxValue2.length; j++) {
						//尺码
						var sizeId = ""
						for (var s = 0; s < this.size.length; s++) {
							if (this.size[s].sizeName == this.checkboxValue2[j]) {
								sizeId = this.size[s].id
							}
						}
						var item2 = {
							"sizeId": sizeId,
							"sizeName": this.checkboxValue2[j],
							"mount": 0
						}
						sizeDtos.push(item2)
					}
					var colorId = ""
					for (var m = 0; m < this.color.length; m++) {
						if (this.color[m].colorName == this.checkboxValue1[i]) {
							colorId = this.color[m].id
						}
					}
					var data = {
						"colorName": this.checkboxValue1[i],
						"colorId": colorId,
						sizeDtos
					}
					newList.push(data)
				}
				console.log(newList)
				this.colorList2 = newList

			},
			checkboxChange(n) {
				console.log('change', n);
			},
			checkboxChange2(n) {
				console.log('change', n);
			},
			change(e) {
				console.log('change', e);
			},

		},
		computed: {


		},
		onShow() {
			//加载缓存的衣服
			this.custmoterName = this.$store.state.custmoerName
		},
		onLoad: function(options) {


			this.id = options.id
			this.name = options.name
			console.log("衣服id" + options.id + "名称" + options.name)

			var that = this
			this.api.get("/clothes/sizeAndColor", {}).then(res => {
				that.size = res.data.sizes
				that.color = res.data.colors
				console.log(res);
			})
		},


	}
</script>

<style scoped lang="scss">
	// 控制高度
	// 正常高度
	.brand {
		box-shadow: 0 0 20upx rgba(0, 0, 0, 0.15);
		border-radius: 10rpx;
	}

	.item {
		margin: 26rpx;
		font-weight: 550;
		font-size: 35rpx;

	}

	.normalHeight {
		height: 100%;
		transition: 0.3s;
	}

	// 头部
	.header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0 10px;
		height: 40px;
	}

	// 表格相关样式
	table {
		border-collapse: collapse;
		width: 98%;
		margin: 0 auto;
		text-align: center;
		font-size: 40rpx;
		font-weight: 600;


		// 每一行下面加边框
		tr {
			width: 100%;
			table-layout: fixed;
		}

		tbody {
			height: 500rpx;
			display: table-row;
		}

		tbody tr {
			display: flex;
			justify-content: space-between;
		}

		.cont {
			height: 40px;
		}
	}



	// 表头设置
	.top {
		height: 40px;
		line-height: 40px;
		background: rgb(242, 245, 247);

		display: flex;
		justify-content: space-around;
		width: 100%;
		table-layout: fixed;

		.title {
			margin-right: 3px;
		}

		th {
			border-left: 1px solid #e9ebec;
			font-weight: 500;
		}
	}



	.bt {
		width: 90%;
		margin: 20rpx auto;
	}

	.custmoer {
		display: flex;
	}

	.input {
		border-bottom: 1rpx #BBBCC6 solid;
	}
</style>
